//Global Variables
var app_id = 282726338407018;
var app_domain = 'http://friendpets.appspot.com';
var access_token;
var user_id;

FB.init({ 
    appId:app_id, 
    cookie:true,
    domain: app_domain,
    status:true, 
    xfbml:true,
    channelURL: app_domain + '/channel.html',
    oauth: true
});         

FB.getLoginStatus(function(response) {
	if (response.status == "not_authorized") {
	  	FB.ui({
	  	    client_id: app_id,
	  	    method: 'oauth',
	  	    scope: 'user_photos',
	  	    redirect_uri: app_domain + '/callback.html',
	  	    response_type: 'token'
	  	});
	} else if (response.status == "unknown") {
	} else if (response.status == "connected") {
		console.log('Welcome!  Fetching your information.... ');
		access_token = response.authResponse.accessToken;
		user_id = response.authResponse.userID;
	  	console.log('access_token = ' + access_token);
	  	console.log('user_id = ' + user_id);
	  	displayGeneralInfo();
	}
});
FB.Event.subscribe('auth.logout', function(response) {
	$("div#content_container").css('display','none');
	window.location.reload();
});
FB.Event.subscribe('auth.login', function(response) {
	console.log('Welcome!  Fetching your information.... ');
	access_token = response.authResponse.accessToken;
	user_id = response.authResponse.userID;
  	console.log('access_token = ' + access_token);
  	console.log('user_id = ' + user_id);
  	displayGeneralInfo();
});

function getUserStatus() {
	FB.getLoginStatus(function(response) {
		if (response.authResponse) {
			alert("User is logged in.");
		} else {
			alert("User is not logged in.");
		}
	});
};
function displayGeneralInfo() {
	//Display content container
	$("div#content_container").css('display','block');
	
    FB.api('/me', function(response) {
	       console.log('Good to see you, ' + response.name + '.');
	       //$("#container").html('');
	       $("#img_profile").append('<img src="https://graph.facebook.com/' + response.id + '/picture" />');
	       $("#txt_profile").append('Name: ' + response.name + '<br/>'+'Gender: ' + response.gender + '<br/>');
	     });        
    FB.api('/me/friends', function(response) {
   	 if(response.data) {
            $.each(response.data,function(index,friend) {
           	 $('<div class="item" id="'+friend.name+'"><a href="#"><img src="https://graph.facebook.com/'+friend.id+'/picture" /></a><div class="caption">'+friend.name+'</div></div>').appendTo('#friends');
            });
            
            //Adding hover over affect
            var move = -15;
            var zoom = 1.2;
            
			$('#box_search').keyup(function(event) { 
				if ((search_started)&&($('#box_search').val().length != 0)) {
					//console.log($('#box_search').val());
					//console.log($('#box_search').val().length);
					//console.log($('.item:first').attr('id').substr(0,$('#box_search').val().length));
					$('.item').each(function() {
						$(this).removeClass('item');
						if ($(this).attr('id').substr(0,$('#box_search').val().length) == $('#box_search').val()) {
							$(this).addClass('item');
						} else {
							$(this).addClass('notselected');
						}
					});
				} else {
					$('.notselected').each(function() {
						$(this).removeClass('notselected');
						$(this).addClass('item');
					});
					$('#friends').css('left','0px');
				}
			});
            
			$('.item').hover(function() {
	            width = $('.item').width() * zoom;
	            height = $('.item').height() * zoom;
				
	            //Move and zoom the image
	            $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
				//Display the caption
				$(this).find('div.caption').stop(false,true).fadeIn(200);
			},
			function() {
				//Reset the image
				$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});
				//Hide the caption
		        $(this).find('div.caption').stop(false,true).fadeOut(200);
			});    
					
        } else {
            alert("Error!");
        }
    });
};